<template>
  <div class="container">
    <el-card style="height: 100%">
      <!-- 自定义tab切换 -->
      <!-- 顶部tab标题 -->
      <div class="tabWapper" ref="tabWapper">
        <div class="lineBg"></div>
        <div class="line" :style="`width: ${pointWidth};`"></div>
        <div class="lineLeft" :style="`width: ${leftWidth};`"></div>
        <div
          class="lineRight"
          :style="`width: ${rightWidth};background: ${lineRightBgc}`"
        ></div>
        <div class="tabItemWrapper">
          <div
            :style="`color: ${
              currentTab == 'gasTightness' ? '#0078f6' : '#D1DAE4'
            };`"
            class="tabItem"
            @click="tabChange('gasTightness')"
          >
            <i
              style="background: #fff"
              ref="gasTightness"
              class="iconfont icon-a-bianzu22beifen1"
            ></i>
            <div class="title">气密性检测</div>
            <div>(全检)</div>
          </div>
          <div
            :style="`color: ${
              currentTab == 'concentration' ? '#c1a41d' : '#D1DAE4'
            };`"
            class="tabItem"
            @click="tabChange('concentration')"
          >
            <i
              style="background: #fff"
              class="iconfont icon-a-bianzu22beifen3"
            ></i>
            <div class="title">浓度、信号、高低温检测</div>
            <div>(抽检)</div>
          </div>
          <div
            :style="`color: ${currentTab == 'signal' ? '#c1a41d' : '#D1DAE4'};`"
            class="tabItem"
            @click="tabChange('signal')"
          >
            <i style="background: #fff" class="iconfont icon-xinhao"></i>
            <div class="title">信号环境检测</div>
            <div>(抽检)</div>
          </div>

          <div
            :style="`color: ${
              currentTab == 'watertightness' ? '#c1a41d' : '#D1DAE4'
            };`"
            class="tabItem"
            @click="tabChange('watertightness')"
          >
            <i
              style="background: #fff"
              ref="watertightness"
              class="iconfont icon-fangshui"
            ></i>
            <div class="title">防水测试</div>
            <div>(抽检)</div>
          </div>
          <div
            :style="`color: ${currentTab == 'angle' ? '#0078f6' : '#D1DAE4'};`"
            class="tabItem"
            @click="tabChange('angle')"
          >
            <i
              style="background: #fff"
              ref="angle"
              class="iconfont icon-a-bianzu22beifen6"
            ></i>
            <div class="title">倾角检测</div>
            <div>(抽检)</div>
          </div>
        </div>
      </div>
      <!-- tab项组件 -->
      <!-- <keep-alive> -->
      <!-- <component :is="currentTab"></component> -->
      <!-- </keep-alive> -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: "DashedTab",
  data() {
    return {
      activeName: "first",
      currentTab: "gasTightness",
      // 虚线长
      pointWidth: "",
      leftWidth: "",
      rightWidth: "",
      lineRightBgc: "rgb(4, 92, 141,.2)",
    };
  },

  mounted() {
    // 确保进度条虚线与点击项位置保持对应
    this.tabChange("gasTightness");
  },

  created() {},
  methods: {
    // 自定义tab切换
    tabChange(val) {
      this.currentTab = val;
      var pointWidth;
      this.leftWidth =
        this.$refs.gasTightness.getBoundingClientRect().left -
        this.$refs.tabWapper.getBoundingClientRect().left +
        "px";
      this.rightWidth =
        this.$refs.tabWapper.getBoundingClientRect().right -
        this.$refs.angle.getBoundingClientRect().right +
        "px";
      switch (val) {
        case "gasTightness":
          pointWidth =
            this.$refs.gasTightness.getBoundingClientRect().left -
            this.$refs.tabWapper.getBoundingClientRect().left +
            "px";
          this.lineRightBgc = "#ccdee8";
          break;
        case "concentration":
          this.lineRightBgc = "#ccdee8";
          pointWidth =
            this.$refs.angle.getBoundingClientRect().left -
            this.$refs.tabWapper.getBoundingClientRect().left +
            "px";
          break;
        case "signal":
          this.lineRightBgc = "#ccdee8";
          pointWidth =
            this.$refs.angle.getBoundingClientRect().left -
            this.$refs.tabWapper.getBoundingClientRect().left +
            "px";
          break;
        case "watertightness":
          this.lineRightBgc = "#ccdee8";
          pointWidth =
            this.$refs.angle.getBoundingClientRect().left -
            this.$refs.tabWapper.getBoundingClientRect().left +
            "px";
          break;
        case "angle":
          pointWidth = "100%";
          this.lineRightBgc = "#0391d3";
          break;

        default:
          break;
      }
      this.pointWidth = pointWidth;
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.tabWapper {
  width: 100%;
  height: 80px;
  // background-color: pink;
  position: relative;
  margin: 20px 0 10px;
  .lineBg {
    width: 100%;
    height: 4px;
    position: absolute;
    top: 12px;
    background: linear-gradient(
      to right,
      rgb(4, 92, 141, 0.2) 0%,
      rgb(4, 92, 141, 0.2) 50%,
      transparent 50%
    );

    background-size: 14px 4px;
  }
  .line {
    // width: 100%;
    height: 4px;
    position: absolute;
    top: 12px;
    background: linear-gradient(
      to right,
      #0391d3 0%,
      #0391d3 50%,
      transparent 50%
    );

    background-size: 14px 4px;
  }
  .lineLeft {
    height: 4px;
    position: absolute;
    left: 0;
    top: 12px;
    background-color: #0391d3;
  }
  .lineRight {
    height: 4px;
    position: absolute;
    right: 0;
    top: 12px;
    // background-color: rgb(4, 92, 141, 0.2);
  }

  .tabItemWrapper {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-around;

    .tabItem {
      position: relative;
      top: -10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      i {
        font-size: 40px;
        font-weight: 400;
      }
      .title {
        margin: 4px 0;
      }
    }
    .tabItem:hover {
      cursor: pointer;
      // color: #0078f6 !important;
      position: relative;
      transform: scale(1.2);
      transition: all 0.1s linear;
    }
  }
}
</style>
